<template>
	<div class="bigDiv">
		<el-form :model="queryParams" :inline="true" label-width="88px" class="demo-dynamic">
			<div class="topNav">
				<el-button type="text" size="small"  icon="el-icon-plus" @click="handleSupplierUserAdd">添加负责人</el-button>
				<el-button type="text" icon="el-icon-refresh" @click="resetQuery" style="float:right">重置</el-button>
				<el-button type="text" icon="el-icon-search" @click="handleQuery" style="float:right">搜索</el-button>
			</div>
			<el-form-item label="负责人" prop="name">
				<el-input v-model="queryParams.name" placeholder="用户名" clearable size="small"
					@keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="供应商" prop="supplierId">
				<el-select size="small" v-model="queryParams.supplierId" placeholder="请选择一个电商" filterable>
					<el-option v-for="item in supplierList" :key="item.id" :label="item.orgNameZh"
						:value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
		</el-form>
		
		<el-table v-loading="loading" :data="list">
			<el-table-column label="供应商" align="center" prop="orgNameZh" />
			<el-table-column label="负责人" align="center" prop="name" />
			<el-table-column label="负责人账号" align="center" prop="account" />
			<el-table-column label="创建时间" align="center" prop="createTime" />
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button size="mini" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<el-dialog :title="title" :visible.sync="open" v-if="open" width="500px" append-to-body>
		
			<el-form :model="info" ref="form" label-width="88px" class="demo-dynamic">
				<el-form-item label="供应商" prop="supplierId">
					<el-select size="small" v-model="info.supplierId" placeholder="请选择一个电商" filterable>
						<el-option v-for="item in supplierList" :key="item.id" :label="item.orgNameZh"
							:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="负责人" prop="supplierId">
					<el-select size="small" v-model="info.userId" placeholder="请输入用户名" filterable remote :remote-method="handleMethod">
						<el-option v-for="item in userList" :key="item.id" :label="item.name + `（${item.account}）`"
							:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
		
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
		
		<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
			@pagination="getList" />
	</div>
</template>

<script>
	import { supplierUserList, supplierSearchUserList, supplierUserBind, supplierUserSave } from "@/api/activiti/goods";
	import { supplierList } from '@/api/supplierActivity/definition'
	export default {
		name: "supplier_name",
		data() {
			return {
				total: 0,
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					name: undefined,
					supplierId: undefined,
				},
				loading: false,
				list: [],
				info: {},
				title: "",
				open: false,
				supplierList: [],
				userList: [],
			}
		},
		mounted() {
			this.getList();
			this.getSupplierList();
		},
		methods: {
			getList() {
				this.loading = true;
				supplierUserList(this.queryParams).then(res => {
					this.list = res.rows
					this.total = res.total
					this.loading = false
				})
			},
			getSupplierList() {
				supplierList().then(res => {
					this.supplierList = res;
				})
			},
			handleMethod(query) {
				if(query != "") {
					supplierSearchUserList(query).then(res => {
						this.userList = res;
					})
				}
			},
			handleQuery() {
				this.getList();
			},
			resetQuery() {
				this.queryParams.name = undefined;
				this.queryParams.supplierId = undefined;
			},
			handleSupplierUserAdd() {
				this.title = "添加负责人";
				this.open = true;
				this.info = {};
			},
			handleEdit(row) {
				this.title = "编辑负责人";
				this.info = row;
				this.open = true;
			},
			cancel() {
				this.open = false;
				this.info = {};
			},
			submitForm() {
				this.open = false;
				supplierUserBind(this.info).then(res => {
					this.$message.success({
						message: "添加成功"
					})
					this.getList();
				})
				this.info = {};
			}
		}
	}
</script>

<style>
</style>